<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/layui/css/layui.css?t=1616353046768" media="all">
    <script src="/layui/layui.js?t=1616353046768"></script>
</head>

<body class="pear-container">

<table class="layui-hide" id="demo" lay-filter="role-table"></table>


<script type="text/html" id="role-toolbar" lay-filter="role-toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
</script>

<script type="text/html" id="role-bar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit" style="color: lightpink">
        <i class="layui-icon layui-icon-edit"></i>
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove" style="color: darkred">
        <i class="layui-icon layui-icon-delete"></i>
    </button>
</script>

</body>
</html>
<script>
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider','jquery'], function() {
        var laydate = layui.laydate, //日期
            layer = layui.layer, //弹层
            table = layui.table, //表格
            element = layui.element, //元素操作
            $ = layui.jquery;
        //监听Tab切换
        element.on('tab(demo)', function (data) {
            layer.tips('切换了 ' + data.index + '：' + this.innerHTML, this, {
                tips: 1
            });
        });

        //let MODULE_PATH = "/";

        //执行一个 table 实例
        table.render({
            elem: '#demo',
            height: 420,
            limit : 5,
            limits : [5,10,15],
            url: "{:url('index')}", //数据接口
            title: '用户表',
            page: true, //开启分页
            toolbar: '#role-toolbar', //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            cols: [[ //表头
                {field: 'name', title: '用户名'},
                {field: 'create_time', title: '创建时间'},
                {field: 'job', title: '职务'},
                {field: 'last_login_time', title: '最后一次登录时间', sort: true},
                {field: 'last_login_ip', title: '最后一次登录ip'},
                {fixed: 'right', title: "操作", idth: 165, align: 'center', toolbar: '#role-bar'},
            ]]
        });
        table.on('tool(role-table)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'edit'){ //查看
                window.edit(obj);
            } else if(layEvent === 'remove'){ //删除
                layer.confirm("是否删除此账号", function(index){
                    $.ajax({
                        url:"{:url('del')}",
                        type:"POST",
                        data:{id:obj.data.id},
                        dataType:"JSON",
                        success (res) {
                            layer.msg(res.msg);
                            setTimeout(function(){
                                layer.closeAll();
                                if (res.code == 1){
                                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                    layer.close(index);
                                    //向服务端发送删除指令
                                }
                            },1000);
                        }
                    })
                });
            }
        });

        table.on("toolbar(role-table)",function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if (layEvent === "add"){
                window.add(obj);
            }
        });

        window.edit = function(obj){
            layer.open({
                type: 2,
                title: '修改用户密码',
                shade: 0.1,
                area: ['1000px', '600px'],
                content: 'edit.html?id=' + obj.data.id
            });
        }

        window.add = function(obj){
            layer.open({
                type: 2,
                title: '新增用户',
                shade: 0.1,
                area: ['1000px', '600px'],
                content: 'add.html'
            });
        }


    });
</script>
